<template>
  <view class="page-container">
    <AdaptiveNavBar title="网站公告" :showBack="true" :showHome="false" backgroundColor="#F37B1D" />
    <view class="content-area" :style="{ marginTop: $navbarUtil.getNavbarTotalHeightRpx() }">
      <view class="notice-list">
        <view 
          v-for="(item, index) in noticeList" 
          :key="index" 
          class="notice-item"
          @click="goToDetail(item)"
        >
          <view class="notice-title">{{ item.title }}</view>
          <view class="notice-arrow">
            <FontIcon name="icon-arrow-right" :size="24" color="#999"></FontIcon>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      noticeList: [
        {
          id: 1,
          title: '了解纤程',
          url: '/public/learnMore/index',
          type: 'about'
        },
        {
          id: 2,
          title: '纤程旅行平台资质',
          url: '/public/notice/detail',
          type: 'qualification'
        },
        {
          id: 3,
          title: '联系我们',
          url: '/public/notice/detail',
          type: 'contact'
        },
        {
          id: 4,
          title: '合作伙伴',
          url: '/public/notice/detail',
          type: 'partner'
        },
        {
          id: 5,
          title: '加入我们',
          url: '/public/notice/detail',
          type: 'join'
        }
      ]
    };
  },
  methods: {
    goToDetail(item) {
      // 特殊处理"了解纤程"，跳转到已有页面
      if (item.type === 'about') {
        uni.navigateTo({
          url: item.url
        });
        return;
      }
      
      uni.navigateTo({
        url: `${item.url}?type=${item.type}&title=${encodeURIComponent(item.title)}`
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.page-container {
  width: 100%;
  min-height: 100vh;
  background-color: #f5f5f5;
}

.content-area {
  padding: 24rpx;
}

.notice-list {
  background: #ffffff;
  border-radius: 16rpx;
  overflow: hidden;
}

.notice-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32rpx 24rpx;
  border-bottom: 1rpx solid #f0f0f0;
  transition: background-color 0.3s;

  &:last-child {
    border-bottom: none;
  }

  &:active {
    background-color: #f8f8f8;
  }
}

.notice-title {
  flex: 1;
  font-size: 30rpx;
  color: #333;
  font-weight: 500;
}

.notice-arrow {
  margin-left: 24rpx;
  display: flex;
  align-items: center;
}
</style>
